<template>
  <div>
      <div class="top">
        <h1>个人中心</h1>
      </div>
      <main>
        <div class="user">
          <div class="left">
            <img src="touxiang.png">
            <div class="info">
                <span>sprite</span>
                <p><img src="pinxiaoquan.png"><i>我的拼小圈&gt;</i></p>
            </div>
          </div>
          <div class="right">
              <div><i class="iconfont icon-paobu"></i><span>我的步数</span></div>
              <div><i class="iconfont icon-hongbao"></i><span>拼单返现</span></div>
          </div>
        </div>

        <div class="yueka">
          <p>
            <b>省钱月卡</b>
            <span>领券再下单 立省124元</span>
          </p>
          <p>
            <a>点我领券</a>
            <i>&gt;</i>
          </p>
        </div>

        <div class="dingdan">
          <div class="top">
            <span>我的订单</span>
            <a href="">查看全部&gt;</a>
          </div>
          <div class="mid">
            <ul>
              <li>
                <span class="iconfont icon-daifukuan mid-icon"></span>
                <i>待付款</i>
              </li>
              <li>
                 <span class="iconfont icon-fenxiang mid-icon"></span>
                <i>待分享</i>
              </li>
              <li>
                 <span class="iconfont icon-clock mid-icon"></span>
                <i>待发货</i>
              </li>
              <li>
                 <span class="iconfont icon-xiaohuoche mid-icon"></span>
                <i>待收货</i>
              </li>
              <li>
                 <span class="iconfont icon-31daipingjia mid-icon"></span>
                <i>评价</i>
              </li>
            </ul>
          </div>
          <div class="bot">
              <img src="2.png" alt="">
              <p>订单金额已经达标,返您<b>43.2元</b>红包</p>
              <span>领取</span>
          </div>
        </div>
        <Division></Division>
        <div class="money">
          <span>多多钱包</span>
          <a href="">您有[31.04元]待领取&gt;</a>
        </div>
        <Division></Division>

        <div class="list">
          <ul>
            <li>
              <span class="iconfont icon-youhuiquan list-icon"></span>
              <i>优惠券</i>
            </li>
            <li>
              <span class="iconfont icon-shoucang list-icon"></span>
              <i>商品收藏</i>
            </li>
            <li>
              <span class="iconfont icon-chakantieziguanzhu list-icon"></span>
              <i>店铺关注</i>
            </li>
            <li>
              <span class="iconfont icon-wendang list-icon"></span>
              <i>历史浏览</i>
            </li>
            <li>
              <span class="iconfont icon-xianjinmingxi list-icon"></span>
              <i>退款售后</i>
            </li>
          </ul>
        </div>
        <Division></Division>
        <div class="fruit">
          <ul>
            <li>
              <span class="iconfont icon-icon_xinyong_xianxing_jijin-173 fruit-icon"></span>
              <i>多多果园</i>
            </li>
            <li>
              <span class="iconfont icon-mianfei fruit-icon"></span>
              <i>免费领商品</i>
            </li>
            <li>
              <span class="iconfont icon-xianjinmingxi fruit-icon"></span>
              <i>天天领现金</i>
            </li>
            <li>
              <span class="iconfont icon-line-magicmofabang fruit-icon"></span>
              <i>多多爱消除</i>
            </li>
            <li>
              <span class="iconfont icon-niu fruit-icon"></span>
              <i>多多农场</i>
            </li>
            <li>
              <span class="iconfont icon-wendang fruit-icon"></span>
              <i>行家帮你选</i>
            </li>
            <li>
              <span class="iconfont icon-huochepiao fruit-icon"></span>
              <i>火车票</i>
            </li>
            <li>
              <span class="iconfont icon-shouhuodizhi fruit-icon"></span>
              <i>收货地址</i>
            </li>
            <li>
              <span class="iconfont icon-kefu fruit-icon"></span>
              <i>官方客服</i>
            </li>
            <li>
              <span class="iconfont icon-shezhi fruit-icon"></span>
              <i>设置</i>
            </li>
          </ul>
        </div>

        <div class="youhui">
          <img src="3.png" alt="">
        </div>
      </main>
      <Bb></Bb>
  </div>
</template>

<script>
import Division from "@/components/home/division.vue"
export default {
    components:{
      Division
    }
}
</script>

<style scoped>
  .top{
    height: 0.6rem;
    width:100%;
    text-align: center;
    line-height: 0.6rem;
  }
  h1{
        font-size: 0.2rem;
    font-weight: 400;
  }
  main{
    flex: 1;
    overflow: scroll;
  }
  .user{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem;
  }
  .user .left{
    display: flex;
  }
  .user .left>img{
    height: 0.85rem;
    margin-right:0.1rem;
  }
  .user .left span{
    font-size: 0.22rem;
    margin-bottom:0.08rem;
  }
  .user .left i{
    font-size: 0.16rem;
    color:#9a999d;
    letter-spacing: 0.01rem;
  }
  .info{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .info img{
    height: 0.18rem;
    vertical-align: middle;
  }
  .right> div> span{
    width:1.18rem;
    height: 0.38rem;
    display: block;
    border:0.02rem solid #c4c4c4;
    border-radius:0.19rem;
    line-height: 0.38rem;
    text-align: center;
    font-size: 0.16rem;
    font-weight: bold;
  }
  .right> div{
    position: relative;
  }
  .right> div:first-child{
    margin-bottom:0.05rem;
  }
  .icon-paobu{
    position: absolute;
    top:0.1rem;
    left:0.06rem;
    font-size: 0.18rem;
    color:#3db9b0;
  }
  .icon-hongbao{
    position: absolute;
    top:0.1rem;
    left:0.06rem;
    font-size: 0.18rem;
    color:#f3000a;
  }
  .yueka{
    width:3.8rem;
    height: 0.6rem;
    margin:0.05rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fef0ed;
    padding:0 0.1rem;
    box-sizing: border-box;
    color: #d4312a;
    border-radius: 0.1rem 0.1rem 0 0;
    }
    .yueka p:first-child b{
      font-size: 0.18rem;
      position: relative;
      padding:0 0.04rem;
      margin-right:0.04rem;
    }
    .yueka p:first-child b::after{
      content:"";
      display: block;
      height: 0.16rem;
      width: 0.02rem;
      position: absolute;
      background-color: #f2d8db;
      right:0;
      top:0.02rem;
    }
    .yueka p:first-child span{
      font-size: 0.14rem;
    }
    .yueka p:last-child{
      display: flex;
      align-items: center;
    }
    .yueka p:last-child a{
      display: block;
      height: 0.33rem;
      width:0.8rem;
      background-color: #dd302a;
      text-align: center;
      line-height: 0.33rem;
      border-radius: 0.16rem;
    } 
    .yueka a{
      color:white;
    }
    .dingdan{
      padding:0 0.2rem;
    }
    .dingdan .top{
      display: flex;
      justify-content: space-between;
    }
    .dingdan .top span{
      font-size: 0.2rem;
      font-weight: bold;
    }
    .dingdan .top a{
      color:#bcbcbc;
    }
    .mid ul{
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.2rem;
    }
    .mid ul li{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .mid-icon{
      font-size: 0.4rem;
      margin-bottom:0.08rem;
    }
    .bot{
      height: 0.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff9fb;
    }
    .bot p{
      font-size: 0.14rem;
    }
    .bot b{
      color: #d15f5a;
    }
    .bot span{
      width:0.88rem;
      height: 0.32rem;
      background-color: #e02e24;
      line-height: 0.32rem;
      text-align: center;
      border-radius: 0.05rem;
      color:white;
    }
    .money{
      height: 0.63rem;
      display: flex;
      padding: 0 0.2rem;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
    }
    .money span{
      font-size: 0.2rem;
      font-weight: 500;
    }
    .money  a{
      color:#d45d50;
    }
    .list{
      height: 1.2rem;
      width:100%;
    }
    .list ul{
      height: 100%;
      padding:0 0.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .list ul li{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .list-icon{
      font-size: 0.4rem;
      margin-bottom: 0.08rem;
      color:red;
    }
    .fruit{
      width:100%;
      height: 2.13rem;
    }
    .fruit ul{
      height: 100%;
      padding:0 0.2rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      font-size: 0.14rem;
    }
    .fruit ul li{
      width:0.7rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .fruit-icon{
      color:#e58b43;
      font-size: 0.4rem;
      margin-bottom:0.08rem;
    }
    .youhui{
      width:100%;
      height: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .youhui img{
      display: block;
      width:4rem;
    }
</style>